<template>
    <div class="course-root">
        <p class="title">学生选课</p>
        <el-table :data="courseList" style="width: 100%;margin-top: 30px;">
            <el-table-column prop="course.courseId" label="课程号" width="200" />
            <el-table-column prop="course.courseName" label="课程名" width="200" />
            <el-table-column prop="course.teacherId" label="讲师编号" width="640" />

            <el-table-column fixed="right" label="操作" min-width="80">
                <template #default="{ row }">
                    <el-button type="success" plain size="small" @click="handleChoose(row)" v-if="!row.isChoose">
                        选课
                    </el-button>
                    <el-button type="danger" plain size="small" @click="handleDrop(row)" v-if="row.isChoose">
                        退选
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
const message = inject("message");
import axios from "../utils/http.ts"
const courseList = ref([])
import { useUserStore } from "../store/user.ts";
const userStore = useUserStore();
const loadData = async () => {
    const res = await axios.post(`/user/listCourse/${userStore.user.id}`);
    if (res.success) {
        courseList.value = res.result;
    }
}

const courseIdToDrop = ref(0);
const handleDrop = (row) => {
    courseIdToDrop.value = row.course.courseId;
    // return;
    ElMessageBox.confirm(
        '确定退选课程?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(() => {
            dropCourse();
        })
        .catch(() => {
            return;
        })
}

const dropCourse = async () => {
    const res = await axios.post(`/user/noChooseCourse/${userStore.user.id}/${courseIdToDrop.value}`);
    if (res.success) {
        message.success(res.message);
        loadData();
    }
}


const courseIdToChoose = ref(0)
const handleChoose = async (row) => {
    console.log("zhhh",row)
    courseIdToChoose.value = row.course.courseId;
    const res = await axios.post(`/user/chooseCourse/${userStore.user.id}/${courseIdToChoose.value}`);
    if (res.success) {
        message.success(res.message);
        loadData();
    }
}

onMounted(() => {
    loadData();
})
</script>

<style lang="scss" scoped>
.course-root {
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-top: 30px;
    height: 100%;
    width: 100%;

    .title {
        border-left: 3px solid var(--el-color-primary);
        padding-left: 10px;
        height: 16px;
        line-height: 16px;
        font-weight: 600;
        color: var(--el-menu-text-color);
    }

    .el-table:deep(.el-table__row) {
        height: 56px;
    }
}
</style>